<!DOCTYPE HTML>
<html>
<head>
    <title>支付页面</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen"/>
</head>
<body>
<div id="app" style="margin:50px 0px 0px 50px">
    <el-breadcrumb separator="||">
        <el-breadcrumb-item ><a href="/main.html" target="main">首页</a></el-breadcrumb-item>
        <el-breadcrumb-item><a href="/tenant.html" target="main">租客租赁</a></el-breadcrumb-item>
        <el-breadcrumb-item>支付</el-breadcrumb-item>
    </el-breadcrumb><br>
    <!--地址-->
    <div style="margin-top: 20px">
        地址：<span style="font-weight: bold;color: red">{{submitForm.address}}</span>
    </div>
    <!-- 提交订单 -->
    <el-form :inline="true" :model="submitForm" class="demo-form-inline">
        <el-form-item label="停车小时数">
            <el-select v-model="submitForm.hours" placeholder="">
                <el-option label="1小时" value="1"></el-option>
                <el-option label="2小时" value="2"></el-option>
                <el-option label="6小时" value="6"></el-option>
                <el-option label="12小时" value="12"></el-option>
                <el-option label="24小时" value="24"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input
                    v-show="false"
                    v-model="submitForm.totalMoney"
                    :disabled="true">
            </el-input>
        </el-form-item>
        <div style="margin-top: 10px">
            总价：<span style="font-weight: bold;color: red">{{totalmoney}}元</span>
        </div><br>
        <el-form-item label="优惠券">
            <el-popover
                    placement="right"
                    width="400"
                    trigger="click">
            <el-table :data="submitForm.gridData">
                <el-table-column width="150" property="couponId" label="优惠券号"></el-table-column>
                <!--优惠券定死一种-->
                <el-table-column width="100"  label="满50减20优惠券"></el-table-column>
                <el-table-column width="300" property="couponNumber" label="剩余数量"></el-table-column>
            </el-table>
                <el-button slot="reference" @click="queryCoupon">查询</el-button>
            </el-popover>
        </el-form-item>
        <el-form-item>
            <el-input v-model="submitForm.coupon" autocomplete="off" placeholder="请输入优惠券号码，没有不填" style="width: 250px"></el-input>
        </el-form-item><br>
        <el-form-item>
            <el-button type="success" @click="balance">余额支付</el-button>
        </el-form-item>
        <el-form-item>

            <el-button type="primary" @click="alipay" >支付宝支付</el-button>
        </el-form-item>
    </el-form>

    <form role="form" action="payMoney" id="update-form">
        <input type="hidden" name="type" value="2">
        <input type="hidden" id="parkspaceId" id="parkspaceId" name="parkspaceId">
        <input type="hidden" name="stoppingTime" id="stoppingTime" :value="submitForm.hours">
        <input type="hidden" name="money" id="money" :value="submitForm.totalmoney">
                        <input type="submit" style="display: none" value="支付宝支付">
    </form>



</div>

<script src="js/jquery-3.5.1.js"></script>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<script src="js/axios.js"></script>
<script src="js/bootstrap.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>

    //获取当前登录用户状态
    var parkId = window.location.search.split("=")[1].split("&")[0];
    var parkAddress = window.location.search.split("=")[2].split("&")[0];
    var parkPrice = window.location.search.split("=")[3];
    $("#parkspaceId").val(parkId);

    console.log(parkId+parkAddress+parkPrice);
    var vm = new Vue({
        el:"#app",
        data: {
            activeIndex: '2',
            submitForm:{
                hours:'1',
                address:parkAddress,
                price:parkPrice,
                totalmoney:parkPrice,
                coupon:'',
                gridData:[],
                couponId:''
            },

            num:1
        },
        computed:{
            /* 更新总价 */
            totalmoney:function(){
                var hours  = parseInt(this.submitForm.hours);
                var price = parseInt(this.submitForm.price);
                var total = hours*price;
                this.submitForm.totalmoney=total;
                console.log(hours+"-"+price+"-"+total);
                return hours*price+"";
            }
        },
        methods: {
            handleSelect:function(key, keyPath) {
                console.log(key, keyPath);
            },
            //查询优惠券
            queryCoupon:function(){
                console.log("查询")
                var vm = this;
                var params ={pageIndex:vm.tableCurr,pageSize:5};
                //,{params:parkId}
                axios.get("/dc")
                    .then(function(resp){
                        console.log(resp.data)
                        if(resp.data.success){
                            console.log(resp);
                            vm.submitForm.gridData=resp.data.object;
                            console.log("返回数据："+resp.data.object);
                        }
                    })
            },
            //余额支付
            balance:function(){
                var vm = this;
                console.log(parkId+vm.submitForm.hours)
                console.log(vm.submitForm.coupon);
                /*submitForm*/
                axios.post("/booking",{
                    parkId:parkId,
                    hours:vm.submitForm.hours,
                    couponId:vm.submitForm.coupon
                }).then(function(resp){
                        if(resp.data.success){
                            alert("支付成功");
                            window.location="main.html";
                        }else{
                            alert("支付失败");
                        }
                    })
            },
            //支付宝支付
            alipay:function(){
                console.log('预定');
                // pay();
                console.log("pay");
                console.log($("#parkspaceId").val());
                console.log($("#stoppingTime").val());
                console.log($("#money").val());
                $("#update-form").submit();
            }
        },
        mounted:function(){
            // var vm = this;
            // var params ={pageIndex:vm.tableCurr,pageSize:5};
            // axios.get("/el/queryTurtor",{params:parkId})
            //     .then(function(resp){
            //         if(resp.data.success){
            //             console.log(resp)
            //             vm.parkData=resp.data.object[0];
            //         }
            //     })
        }

    });

    function pay() {
        console,load("pay");
        console,load($("#parkspaceId").val());
        console,load($("#stoppingTime").val());
        console,load($("#money").val());
            $("#update-form").submit();
    }
</script>
</body>
</html>
